<template>
  <div class="change-password">
    <el-input
      v-model="passwordForm.oldPwd"
      placeholder="请输入旧密码"
      class="custom-input"
    ></el-input>
    <el-input
      v-model="passwordForm.newPwd"
      placeholder="请输入新密码"
      class="custom-input"
    ></el-input>
    <div class="button-container">
      <el-button type="primary" @click="changePassword" class="custom-button"
        >确认修改</el-button
      >
      <el-button type="default" @click="cancelChange" class="custom-button"
        >取消</el-button
      >
    </div>
  </div>
</template>
  
<script>
import { mapState } from "vuex";
import { editUserPassword } from "../../api/data";
export default {
  data() {
    return {
      passwordForm: {
        oldPwd: "",
        newPwd: "",
      },
    };
  },
  methods: {
    changePassword() {
      function areFieldsNotEmpty(form) {
        return form.oldPwd && form.newPwd;
      }
      if (areFieldsNotEmpty(this.passwordForm)) {
        let Authorization = this.$store.state.user.token;
        let params = [this.passwordForm, Authorization];
        console.log(params);
        editUserPassword(params).then(({ data: res }) => {
          if (res.status == 0) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
            this.passwordForm = {
              oldPwd: "",
              newPwd: "",
            };
          } else {
            this.$message({
              message: "修改失败" + res.message,
              type: "warning",
            });
          }
        });
      }
    },
    cancelChange() {
      this.passwordForm = {
        oldPwd: "",
        newPwd: "",
      };
    },
  },
  computed: {
    ...mapState({
      userToken: (state) => state.user.token,
    }),
  },
};
</script>
  
  <style scoped>
.change-password {
  max-width: 300px;
  margin: 0 auto;
}

.custom-input {
  width: 100%;
  height: 40px;
  margin-bottom: 10px;
}

.button-container {
  display: flex;
  justify-content: center;
}

.custom-button {
  margin: 0 5px;
}
</style>